<template>
  <section class="mod-backtop gototop" @click="backTop" v-show="topShow"><i class="iconfont icon-top"></i></section>
</template>

<script>
  export default {
    name: 'modBackTop',
    data () {
      return {
        topShow: false,
        speed: 0
      };
    },
    methods: {
      backTop () {
        let that = this;
        that.speed = (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop) / 10;
        window.requestAnimationFrame(this.stepBack);
      },
      stepBack () {
        let that = this;
        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        scrollTop -= that.speed;
        window.scrollTo(0, scrollTop);
        if (scrollTop > 0) {
          window.requestAnimationFrame(this.stepBack);
        }
      }
    },
    ready () {
      let that = this;
      window.onscroll = ()=>{
        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        let lenWin = window.screen.height;
        if (scrollTop >= lenWin * 0.6) {
          that.topShow = true;
        } else {
          that.topShow = false;
        }
        return;
      };
    }
  };
</script>

<style scoped>

</style>
